<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
    <style>
        .sidebar {
            height: 100vh;
            background-color: #343a40;
            padding-top: 20px;
        }
        .sidebar .nav-link {
            color: #fff;
            padding: 15px 20px;
            border-radius: 4px;
            margin: 5px 15px;
        }
        .sidebar .nav-link:hover {
            background-color: #495057;
        }
        .sidebar .nav-link.active {
            background-color: #007bff;
        }
        .sidebar .nav-link i {
            margin-right: 10px;
        }
        .main-content {
            padding: 20px;
        }
        .card {
            margin-bottom: 20px;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
        .card-header {
            background-color: #f8f9fa;
            border-bottom: none;
        }
        .table th {
            border-top: none;
            background-color: #f8f9fa;
        }
        .btn-action {
            margin: 0 2px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 sidebar">
                <div class="text-center mb-4">
                    <h4 class="text-white">学生信息管理系统</h4>
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#" onclick="loadContent('student')">
                            <i class="fas fa-user-graduate"></i>学生管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="loadContent('class')">
                            <i class="fas fa-chalkboard"></i>班级管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="loadContent('grade')">
                            <i class="fas fa-graduation-cap"></i>年级管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" onclick="loadContent('major')">
                            <i class="fas fa-book"></i>专业管理
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 主要内容区域 -->
            <div class="col-md-10 main-content">
                <div id="content-area">
                    <!-- 内容将通过AJAX动态加载 -->
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
    
    <script>
        function loadContent(type) {
            // 更新活动状态
            $('.nav-link').removeClass('active');
            $(`a[onclick="loadContent('${type}')"]`).addClass('active');
            
            // 加载对应的内容
            $.ajax({
                url: `/${type}/page`,
                type: 'GET',
                success: function(data) {
                    $('#content-area').html(data);
                },
                error: function(xhr, status, error) {
                    console.error('加载失败:', error);
                    alert('加载内容失败，请检查控制台日志');
                }
            });
        }

        // 页面加载完成后默认加载学生管理页面
        $(document).ready(function() {
            loadContent('student');
        });
    </script>
</body>
</html> 